import React, { Component } from 'react';
import { Alert } from 'react-native';
import {
  Chip,
  Colors,
  Spacings,
  Text,
  Typography,
  View,
  Image,
  ChipRef
} from 'react-native-ui-lib';
import { TestCase, TestSuite } from '@rnoh/testerino';

const avatarImage = {
  uri: 'https://randomuser.me/api/portraits/women/24.jpg',
};
const checkmark = require('../../assets/icons/check-small.png');
const chevron = require('../../assets/icons/chevronDown.png');
const bell = require('../../assets/icons/bell.png');

const element = <Chip
  label={'element'}
  rightIconSource={chevron}
/>;



export default class ChipScreen extends Component {
  colors = [
    { value: Colors.red10, label: 'Red' },
    { value: Colors.blue10, label: 'Blue' },
    { value: Colors.purple10, label: 'Purple' },
    { value: Colors.green10, label: 'Green' },
    { value: Colors.yellow10, label: 'Yellow' },
  ];

  chip = React.createRef<ChipRef>();

  state = {
    selectedValue: this.colors[2].label,
  };

  renderExample = (text: string, chip: JSX.Element) => {
    return (
      <View row spread marginB-12>
        <Text text70 $textDefault>
          {text}
        </Text>
        {chip}
      </View>
    );
  };

  render() {
    return (
      <TestSuite name="Chip">

        <TestCase itShould="设置avatarProps">
          <View padding-20>
            <Chip
              label={'Chip'}
            />,

            <Chip
              label={'Chip'}
              avatarProps={{ source: avatarImage, size: 20 }}
            />,
          </View>
        </TestCase>

        <TestCase itShould="设置backgroundColor">
          <View padding-20>
            <Chip
              label={'Chip'}
              backgroundColor="blue"
            />,

            <Chip
              label={'Chip'}
              backgroundColor="red"
            />,
          </View>
        </TestCase>

        <TestCase itShould="设置badgeProps">
          <View padding-20>
            <Chip
              label={'Chip'}
              badgeProps={{
                label: '4',
                backgroundColor: 'red',
              }}
            />,

            <Chip
              label={'Chip'}
              badgeProps={{
                label: '4',
                backgroundColor: 'blue',
              }}
            />,
          </View>
        </TestCase>

        <TestCase itShould="设置borderRadius">
          <View padding-20>
            <Chip
              label={'Chip'}
              borderRadius={2}
            />,

            <Chip
              label={'Chip'}
              borderRadius={8}
            />,
          </View>
        </TestCase>

        <TestCase itShould="设置containerStyle">
          <View padding-20>
            <Chip
              label={'Chip'}
              containerStyle={{ backgroundColor: "red" }}
            />,

            <Chip
              label={'Chip'}
              containerStyle={{ backgroundColor: "blue" }}
            />,
          </View>
        </TestCase>

        <TestCase itShould="设置iconStyle">
          <View padding-20>
            <Chip
              label={'Chip'}
              iconSource={checkmark}
              iconStyle={{ width: 10, height: 10 }}
              iconProps={{ tintColor: Colors.$iconDefault }}
            />,

            <Chip
              label={'Chip'}
              iconSource={checkmark}
              iconStyle={{ width: 20, height: 20 }}
              iconProps={{ tintColor: Colors.$iconDefault }}
            />,
          </View>
        </TestCase>

        <TestCase itShould="设置Label">
          <View padding-20>
            <Chip label={'Chip1'} />

            <Chip label={'Chip2'} />
          </View>
        </TestCase>

        <TestCase itShould="设置labelStyle">
          <View padding-20>
            <Chip
              label={'Chip'}
              labelStyle={{
                fontSize: 10,
                color: 'green',
                marginLeft: 10,
              }}
            />,

            <Chip
              label={'Chip'}
              labelStyle={{
                fontSize: 15,
                color: 'red',
                marginLeft: 10,
              }}
            />,
          </View>
        </TestCase>

        <TestCase itShould="设置resetSpacings,第一个为false，第二个为true">
          <View padding-20>
            <Chip
              label={'Chip'}
              iconSource={checkmark}
              iconStyle={{ width: 24, height: 24 }}
              iconProps={{ tintColor: Colors.$iconDefault }}
              resetSpacings={false}
            />,

            <Chip
              label={'Chip'}
              iconSource={checkmark}
              iconStyle={{ width: 24, height: 24 }}
              iconProps={{ tintColor: Colors.$iconDefault }}
              resetSpacings
            />,
          </View>
        </TestCase>

        <TestCase itShould="设置rightIconSource">
          <View padding-20>
            <Chip
              label={this.state.selectedValue}
              iconStyle={{ margin: 8 }}
            />,

            <Chip
              label={this.state.selectedValue}
              rightIconSource={chevron}
              iconStyle={{ margin: 8 }}
            />,
          </View>
        </TestCase>

        <TestCase itShould="设置useCounter，第一个为true，第二个为false">
          <View padding-20>
            <Chip
              label={'Chip'}
              labelStyle={{
                marginRight: undefined,
              }}
              useCounter
              badgeProps={{
                label: '4',
                labelStyle: {
                  ...Typography.text80R,
                  color: Colors.$textNeutralHeavy,
                },
              }}
            />,

            <Chip
              label={'Chip'}
              labelStyle={{
                marginRight: undefined,
              }}
              useCounter={false}
              badgeProps={{
                label: '4',
                labelStyle: {
                  ...Typography.text80R,
                  color: Colors.$textNeutralHeavy,
                },
              }}
            />,
          </View>
        </TestCase>

        <TestCase itShould="设置size">
          <View padding-20>
            <Chip
              label={'Chip'}
              rightIconSource={chevron}
              size={20}
            />,

            <Chip
              label={'Chip'}
              rightIconSource={chevron}
              size={50}
            />,
          </View>
        </TestCase>

        <TestCase itShould="设置useSizeAsMinimum,第一个为false，第二个为true">
          <View padding-20>
            <Chip
              label={'Chip'}
              rightIconSource={chevron}
              size={10}
              useSizeAsMinimum={false}
            />,

            <Chip
              label={'Chip'}
              rightIconSource={chevron}
              size={10}
              useSizeAsMinimum
            />,
          </View>
        </TestCase>

        <TestCase itShould="设置leftElement">
          <View padding-20>
            <Chip
              label={'Chip'}
            />,

            <Chip
              label={'Chip'}
              leftElement={element}
            />,
          </View>
        </TestCase>

        <TestCase itShould="设置rightElement">
          <View padding-20>
            <Chip
              label={'Chip'}
            />,

            <Chip
              label={'Chip'}
              rightElement={element}
            />,
          </View>
        </TestCase>

        <TestCase itShould="设置iconProps">
          <View padding-20>
            <Chip
              label={'Chip'}
              iconProps={{ tintColor: "blue" }}
              rightIconSource={chevron}
            />,

            <Chip
              label={'Chip'}
              iconProps={{ tintColor: "red" }}
              rightIconSource={chevron}
            />,
          </View>
        </TestCase>

        <TestCase
          itShould="设置onPress属性"
          initialState={false}
          arrange={({ setState, reset }) => (
            <View padding-20>
              {this.renderExample(
                'onPress',
                <Chip
                  testID="chipId"
                  ref={this.chip}
                  label={'Chip'}
                  onPress={() => {
                    Alert.alert('onPress  testID:' + (this.chip.current?.testID ?? "chipId"));
                    setState(true);
                  }}
                />,
              )}
            </View>
          )}
          assert={({ state, expect }) => {
            expect(state).to.be.true;
          }}
        />

        <TestCase itShould="设置dismissIcon">
          <View padding-20>
            <Chip
              label={'Chip'}
              dismissIcon={bell}
              dismissIconStyle={{ width: 30, height: 30 }}
            />,

            <Chip
              label={'Chip'}
              dismissIcon={chevron}
              dismissIconStyle={{ width: 30, height: 30 }}
            />,
          </View>
        </TestCase>

        <TestCase itShould="设置dismissContainerStyle">
          <View padding-20>
            <Chip
              label={'Chip'}
              dismissContainerStyle={{ backgroundColor: "blue" }}
              dismissIcon={bell}
              dismissIconStyle={{ width: 30, height: 30 }}
            />,

            <Chip
              label={'Chip'}
              dismissContainerStyle={{ backgroundColor: "red" }}
              dismissIcon={bell}
              dismissIconStyle={{ width: 30, height: 30 }}
            />,
          </View>
        </TestCase>

        <TestCase itShould="设置dismissIconStyle">
          <View padding-20>
            <Chip
              label={'Chip'}
              dismissIcon={bell}
              dismissIconStyle={{ width: 15, height: 15 }}
            />,

            <Chip
              label={'Chip'}
              dismissIcon={bell}
              dismissIconStyle={{ width: 30, height: 30 }}
            />,
          </View>
        </TestCase>

        <TestCase itShould="设置dismissColor">
          <View padding-20>
            <Chip
              label={'Chip'}
              dismissIcon={bell}
              dismissColor="red"
              dismissIconStyle={{ width: 30, height: 30 }}
            />,

            <Chip
              label={'Chip'}
              dismissIcon={bell}
              dismissColor="green"
              dismissIconStyle={{ width: 30, height: 30 }}
            />,
          </View>
        </TestCase>

        <TestCase itShould="设置dismissColor">
          <View padding-20>
            <Chip
              label={'Chip'}
              dismissIcon={bell}
              dismissColor="red"
              dismissIconStyle={{ width: 30, height: 30 }}
            />,

            <Chip
              label={'Chip'}
              dismissIcon={bell}
              dismissColor="green"
              dismissIconStyle={{ width: 30, height: 30 }}
            />,
          </View>
        </TestCase>

        <TestCase
          itShould="设置onDismiss"
          initialState={false}
          arrange={({ setState, reset }) => (
            <View padding-20>
              {this.renderExample(
                'onDismiss',
                <Chip
                  label={'Chip'}
                  onDismiss={() => {
                    Alert.alert('onDismiss')
                    setState(true)
                  }}
                  dismissIcon={bell}
                  dismissIconStyle={{ width: 30, height: 30 }}
                />,
              )}
            </View>
          )}
          assert={({ state, expect }) => {
            expect(state).to.be.true;
          }}
        />
      </TestSuite>
    );
  }
}
